import styled from 'styled-components'
import Icon from '../../component/Icon'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'

const Container = styled.div`
    display: flex;
    flex-direction: column;
    padding: 0 1.125rem 0 1.0625rem;
    box-sizing: border-box;
    width: 100%;
`

const Title = styled.span`
    font-weight: 400;
    font-size: .875rem;
    color: white;
    width: 100%;
    white-space: pre-wrap;
    text-align: start;
    .content {
        font-size: 1rem;
    }
`

const Bottom = styled.div`
    margin-top: 1rem;
    display: flex;
    width: 100%;
    
`
const Coin = styled(Icon)`
    width: 1.375rem;
    height: 1.4375rem;
`

const SubTitleBox = styled.div`
    margin-left: .6875rem;
    margin-top: .375rem;
    text-align: start;
`

const SubTitle = styled.div`
    font-weight: 400;
    font-size: .875rem;
    color: #E1CB85;
    margin-bottom: .5625rem;
`


const Header: React.FC = () => {
    const { t } = useTranslation()

    const subTitles = useMemo(() => {
        return [
            t('ton.des.level1'),
            t('ton.des.level2')
        ]
    }, [t])

    return <Container>
        <Title>
            <div>{t('ton.des.title')}</div>
            <div className='content'>{t('ton.des.content')}</div>
        </Title>
        <Bottom>
            <Coin name='ton_coin' />
            <SubTitleBox>
                {subTitles.map((text, idx) => <SubTitle key={idx}>{text}</SubTitle>)}
            </SubTitleBox>
        </Bottom>
    </Container>
}

export default Header